<template>
  <div class="goods-container">
    <el-row justify="center" :gutter="40">
      <!-- 左侧图片区域 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="8">
        <div class="image-wrapper">
          <div class="image-placeholder">
            <el-icon :size="60" color="#909399">
              <Picture />
            </el-icon>
            <div class="image-tip">商品图片预览区域</div>
          </div>
        </div>
      </el-col>

      <!-- 右侧信息区域 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="14" :xl="16">
        <div class="goods-info">
          <h1 class="goods-title">商品名称 {{ id }}</h1>

          <!-- 价格区域 -->
          <div class="price-section">
            <div class="current-price">¥ 299.00</div>
            <div class="price-extra">
              <span class="original-price">¥ 399.00</span>
              <el-tag type="danger" size="small" class="discount-tag"
                >7折优惠</el-tag
              >
            </div>
          </div>

          <!-- 商品描述 -->
          <div class="description-section">
            <h3 class="description-title">商品详情</h3>
            <div class="description-content">
              采用优质材料精心打造，经过严格质量检测。<br />
              尺寸：30cm × 20cm × 15cm<br />
              重量：1.2kg<br />
              颜色：星空灰/象牙白/深海蓝
            </div>
          </div>

          <!-- 库存信息 -->
          <div class="meta-section">
            <div class="stock-item">
              <span class="meta-label">库存：</span>
              <el-tag :type="stockTagType" effect="dark">{{ stock }} 件</el-tag>
            </div>
            <div class="sales-item">
              <span class="meta-label">销量：</span>
              <span class="meta-value">1234 件</span>
            </div>
          </div>

          <!-- 数量选择 -->
          <div class="quantity-section">
            <div class="quantity-label">购买数量</div>
            <el-input-number
              v-model="quantity"
              :min="1"
              :max="stock"
              size="large"
              controls-position="right"
              class="quantity-input"
            />
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button
              type="primary"
              size="large"
              class="buy-button"
              :disabled="stock === 0"
              @click="handleBuy()"
            >
              <el-icon>
                <ShoppingCart />
              </el-icon>
              立即购买
            </el-button>

            <el-button
              type="success"
              size="large"
              :disabled="stock === 0"
              @click="handleAddCart"
            >
              <el-icon>
                <Goods />
              </el-icon>
              加入购物车
            </el-button>

            <el-button
              type="danger"
              size="large"
              :disabled="stock === 0"
              @click="handleAddCart"
            >
              <el-icon>
                <Opportunity />
              </el-icon>
              进行团购
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { Picture, ShoppingCart, Goods } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const id = route.params.id;

// 库存逻辑
const stock = ref(50);
const stockTagType = computed(() => {
  if (stock.value === 0) return "danger";
  if (stock.value < 10) return "warning";
  return "success";
});

// 数量选择
const quantity = ref(1);

// 操作处理
const handleBuy = () => {
  console.log("count" + quantity.value);
  console.log(id);
  stock.value -= quantity.value;
  router.push({
    name: "userOrderDetail",
  });
};
const handleAddCart = () => {
  console.log("count" + quantity.value);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.goods-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 图片区域样式 */
.image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  /* 保持1:1宽高比 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.image-tip {
  margin-top: 15px;
  font-size: 14px;
}

/* 右侧信息区域 */
.goods-info {
  padding: 20px 30px;
}

.goods-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 25px;
}

.price-section {
  margin-bottom: 30px;
}

.current-price {
  font-size: 36px;
  color: #f56c6c;
  font-weight: 700;
  line-height: 1;
}

.price-extra {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.original-price {
  font-size: 16px;
  color: #909399;
  text-decoration: line-through;
}

.meta-section {
  display: flex;
  gap: 30px;
  margin: 25px 0;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.meta-label {
  color: #606266;
  margin-right: 8px;
}

.meta-value {
  color: #303133;
}

.quantity-section {
  margin: 30px 0;
}

.quantity-label {
  font-size: 16px;
  color: #606266;
  margin-bottom: 15px;
}

.quantity-input {
  width: 160px;
}

.action-buttons {
  margin: 40px 0;
  display: flex;
  gap: 20px;

  .el-button {
    flex: 1;
    padding: 25px 0;
    font-size: 18px;
  }
}

.description-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #ebeef5;
}

.description-title {
  color: #303133;
  margin-bottom: 20px;
}

.description-content {
  color: #606266;
  line-height: 1.8;
  font-size: 15px;
}

@media (max-width: 768px) {
  .goods-title {
    font-size: 24px;
  }

  .current-price {
    font-size: 28px;
  }

  .action-buttons {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }

  .meta-section {
    flex-direction: column;
    gap: 15px;
  }
}
</style>
